import React, { Component } from 'react'
import {connect} from 'react-redux';
import {collent_action,detail_action} from '../../store/store'
import Header from '../common/Header';
import {Toast} from "antd-mobile";
import {Link} from "react-router-dom"
class Collent extends Component {
    render() {
        return (
            <div className='collent'>
                {/* 头部组件 */}
                <Header left={<span onClick={()=>{this.props.history.push('/my')}}>&lt;</span>} title="收藏页面" right={<div><span className='iconfont icon-sangedian'></span>|<span className='iconfont icon-cha'></span></div>}></Header>
                {/* 收藏页面 */}
                {this.props.list.length>0?
                this.props.list.map((item,index)=>{
                    return(
                        <Link className="shop" key={item.id} to='/detail' onClick={()=>{this.props.detshop(item.id)}}>
                            <div className="img">
                                <img src={item.pic} alt=""/>
                            </div>
                            <div className="txt">
                                <h4>{item.name}</h4>
                                <p>月销量：{item.num}</p>
                                <p>距离：{item.city}km</p>
                            </div>
                            <span className={`iconfont icon-shoucang active`} onClick={(e)=>{this.props.coll(item);Toast.fail('取消收藏 !!!', 1);e.preventDefault()}}></span>
                        </Link>
                    )
                }):
                <div className='div'>
                    <img src="/img/3.jpg" alt=""/>
                    <button onClick={()=>{this.props.history.push('/home')}}>去逛逛</button>
                </div>
                }
            </div>
        )
    }
}
export default connect(
    (state)=>{
        return {
            list:state.collentShop
        }
    },
    (dispatch)=>{
        return {
            coll:(item)=>{
                dispatch(collent_action(item))
            },
            detshop:(id)=>{
                dispatch(detail_action(id))
            }
        }
    }
)(Collent)
